<template>
  <div class="box">
    <header>
      <van-sticky>
        <van-nav-bar
          :title="item.title"
          right-text="●●●"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-sticky>
    </header>
    <main>
      <div class="main">
        <div>
          <p class="title">
            <span>
              {{ item.title }}
            </span>
          </p>
          <div class="description">
            <van-text-ellipsis
              content="病情描述：（女,56岁）到底是怎么患上双胃这个病症的"
              dots=""
              expand-text="展开"
              collapse-text="收起"
            />
          </div>
          <p class="deptime">发布于&nbsp;{{ item.time }}</p>
          <div class="introduction">
            <div>
              <img :src="item.avatar" class="avatar" alt="" />
            </div>
            <div class="jieshao">
              <div class="ta">
                <div class="name">
                  <span>{{ item.name }}</span>
                </div>
                <div class="zw">
                  <span>{{ item.position }}</span>
                </div>
                <div class="dz"><span>三甲</span></div>
              </div>
              <div class="bo">
                <div class="ks">
                  <span>{{ item.department }}</span>
                </div>
                <div class="address"><span>聊城市第二人民医院</span></div>
              </div>
            </div>
          </div>
          <div class="content">
            <span class="word">
              <span class="content-text">病情分析：</span>
              {{ item.content[0].word }}
            </span>
            <p class="deptime2">发布于&nbsp;&nbsp;{{ item.time }}</p>

            <div class="video" v-show="item.type === '视频'">
              <video
                ref="videoElement"
                width="100%"
                height="100%"
                controls
                @play="handlePlay('video')"
                @pause="handlePause('video')"
                @ended="handleEnded('video')"
              >
                <source :src="videoSrc" type="video/mp4" />
                Your browser does not support the video tag.
              </video>
            </div>
            <div class="audio" v-show="item.type === '音频'">
              <audio
                class="audio"
                ref="audioElement"
                controls
                @play="handlePlay('audio')"
                @pause="handlePause('audio')"
                @ended="handleEnded('audio')"
              >
                <source :src="audioSrc" type="audio/mpeg" />
                Your browser does not support the audio element.
              </audio>
            </div>
          </div>
          <div>
            <span class="warning">
              友情提示：以上内容仅供参考，具体诊疗请遵循医生指导。妙手医生版权所有，未经允许可不得转载。
            </span>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const onClickLeft = () => {
  router.push("/home");
};
const inputVal = ref("");
const pingl = () => {
  console.log(inputVal.value);
  inputVal.value = "";
};

// 获取路由详情数据
const route = useRoute();
const item = ref(JSON.parse(decodeURIComponent(route.query.item)));
console.log(item.value);
let starlist = ref([]);
const star = () => {
  starlist.value.push(item.value);
  localStorage.setItem("star", JSON.stringify(starlist.value));
};
// css样式
import "./index.css";

// 视频
const videoElement = ref<HTMLVideoElement | null>(null);
// 音频
const audioElement = ref<HTMLAudioElement | null>(null);

const mediaStatus = reactive({
  video: "Video is paused",
  audio: "Audio is paused",
});

const videoSrc = "../../assets/vidaud/模拟视频.mp4"; // 替换为你的视频文件路径
const audioSrc = "../../assets/vidaud/模拟音频.mp3"; // 替换为你的音频文件路径

const handlePlay = (mediaType: "video" | "audio") => {
  if (mediaType === "video" && videoElement.value) {
    mediaStatus.video = "Video is playing";
  } else if (mediaType === "audio" && audioElement.value) {
    mediaStatus.audio = "Audio is playing";
  }
};

const handlePause = (mediaType: "video" | "audio") => {
  if (mediaType === "video" && videoElement.value) {
    mediaStatus.video = "Video is paused";
  } else if (mediaType === "audio" && audioElement.value) {
    mediaStatus.audio = "Audio is paused";
  }
};

const handleEnded = (mediaType: "video" | "audio") => {
  if (mediaType === "video") {
    mediaStatus.video = "Video has ended";
  } else if (mediaType === "audio") {
    mediaStatus.audio = "Audio has ended";
  }
};
</script>
